<template>
    <div>
        <div class="groups_list">
                <div class="group_list_func">
                    <Button type="primary" style="height: 100%;" @click="deal_use_group_tool">
                    {{ show_create_box ? '关闭创建' : '发起群聊'}}
                    </Button>
                </div>
                <div v-for="(item,index) in group_list" :key="item.room_info.room_id">
                        <LIST_ITEM  :item="item" :key="String(index)+'group'">
                        </LIST_ITEM>
                </div>
        </div> 

        <div class="group_create_box" v-if="show_create_box">
                   <CREATE_ROOM v-if="show_create_box" />
        </div>

    </div>
</template>

<script setup>
import { computed, inject , onMounted, ref, watch} from 'vue'
import CREATE_ROOM from "./create_room.vue"
import { get_user_GroupList } from "@/api/chat/room.js"
import LIST_ITEM from './item.vue'
const user = inject('user')()
const chat = inject('chat')()
let group_list = ref([])
const show_create_box=ref(false)
const middledata = computed(() => { 
    return chat.value.get_group_list()
})
watch(() => middledata.value, (newValue) => { 
    group_list.value=newValue
})

const deal_show_all_info = (value) => { 
    console.log(value)
}


onMounted(async () => {
    // console.log(1)
    if ((Object.keys(chat.value.get_group_list()).length) ==0 &&
        (user.value?.get_user()?.groups_count != undefined && user.value?.get_user()?.groups_count != 0)) {
        const grouplist = await get_user_GroupList(user.value?.get_user()?.id)
        if (grouplist !== undefined) { 
              chat.value.set_group_list(grouplist)
              group_list.value = grouplist
        }
    } else { 
        group_list.value = chat.value.get_group_list()
    }
    // console.log(chat.value.get_group_list())
    // 测试数据
    const test =[
            {
                "room_info": {
                "room_id": "0676f71f-59e2-4101-b956-6412ef6ead41",
                "created_at": "2025-04-25 21:40:55.921037",
                "is_active": true,
                "user_info": {
                    "1": {
                    "joined_at": "2025-04-25 21:40:55.921037",
                    "active": 1
                    },
                    "2": {
                    "joined_at": "2025-04-25 21:40:55.921037",
                    "active": 1
                    },
                    "88888888": {
                    "joined_at": "2025-04-25 21:40:55.921037",
                    "active": 1
                    }
                },
                "head_image": null,
                "type": "group",
                "group_name": null
                }
            }
                ]

})


const deal_use_group_tool = () => { 
    show_create_box.value = !show_create_box.value
}


</script>

<style scoped>
.groups_list{
    width: 100%;
    position: relative;
    z-index: 100;
}
.group_list_func{
    width: 100%;
    /* background-color: red; */
    height: 25px;
    margin-top: 2px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}
.group_create_box{
    position: fixed;
    top: 200px;
    left: 50%;
    width: 500px;
    height: 350px;
    margin-left: -250px;
    z-index: 101;
}

</style>